<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p>项目成员</p>
                        <p>这里将展示你的项目成员</p>
                    </div>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <div class="party-title">
                创建人
            </div>
            <div>
                <div class="party-item">{{me.label}}</div>
            </div>
            <div class="party-title" style="margin-top: 62px">
                <div>开发者</div>
                <PersonInput type="primary" :team="false" @on-selection-data="personSelect">添加</PersonInput>
            </div>
            <div v-if="personList.length > 0">
                <div class="party-item" v-for="(item, index) in personList">{{item.label}}<Icon type="close-round" color="#ed3f14" @click="deleteParty(item.id, index)"></Icon></div>
            </div>
            <div v-else style="margin-top: 8px; color: #9ea7b4">
                你还没有添加其他成员!
            </div>
        </div>
    </div>
</template>

<script>
    import ContentHead from './contentHead';
    export default {
        data(){
            return {
                personList: [],
                me: {},
                projectId: this.$route.query.id,
                userId: this.$route.query.partyId
            };
        },
        props:{
            project: Object
        },
        components:{
            ContentHead
        },
        created(){
            this.$http.get('/codegen/api/v1/partyproject/userInfo/' + this.projectId + '/' + '0').then((res)=>{
                if (res.status === 200 && res.data.infoList.length > 0) {
                    res.data.infoList.forEach((item)=>{
                        if (item.hotpotUser.flag === '0') {
                            this.$set(this.me, 'id', item.hotpotUser.id);
                            this.$set(this.me, 'label', item.hotpotUser.name + '        ' + item.hotpotOrganization.orgFullName);
                        } else {
                            this.personList.push({
                                id: item.hotpotUser.id,
                                label: item.hotpotUser.name + '        ' + item.hotpotOrganization.orgFullName
                            });
                        }
                    });
                }
                this.$http.get('/codegen/api/v1/partyproject/userInfo/' + this.projectId + '/' + '1').then((res)=>{
                    if (res.status === 200 && res.data.orgsList.length > 0) {
                        res.data.orgsList.forEach((item)=>{
                            this.personList.push({
                                id: item.id,
                                label: item.orgFullName
                            });
                        });
                    }
                });
            });
        },
        methods:{
            personSelect(data){
                let map = new Map();
                this.personList.forEach((item)=>{
                    map.set(item.id, item);
                });
                let list = [];
                let array = [];
                if (data.personList.length > 0) {
                    data.personList.forEach((item)=>{
                        if (!map.has(item.id)) {
                            array.push({
                                partyId: item.userId,
                                projectId: this.projectId,
                                style: '0',
                                flag: '1'
                            });
                        }
                    });
                }
                if (data.orgList.length > 0) {
                    data.orgList.forEach((item)=>{
                        if (!map.has(item.id)) {
                            array.push({
                                partyId: item.id,
                                projectId: this.projectId,
                                style: '1',
                                flag: '1'
                            });
                        }
                    });
                }
                this.$http.post('/codegen/api/v1/partyproject/save', array).then((res)=>{
                    if (res.status === 200) {
                        this.personList.concat(list);
                    }
                });
            },
            deleteParty(id, index){
                this.$Modal.confirm({
                    title: '删除成员',
                    content: '<p>确认删除该成员吗？</p>',
                    onOk: () => {
                        this.$http.delete('/codegen/api/v1/partyproject/delete/' + id).then((res)=>{
                            if (res.status === 200) {
                                this.$Message.success('删除成功！');
                                this.personList.splice(index, 1);
                            }
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .project-content {
        width: 1024px;
        margin: 16px auto 0 auto;
        padding: 16px;
        background-color: #fff;

        .party-title{
            font-size: 16px;
            color: #7a7a7a;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 1px solid #ddd;
            padding-bottom: 8px;
        }

        .party-item{
            margin-top: 8px;
            i{
                cursor: pointer;
                margin-left: 10px;
                vertical-align: middle;
            }
        }
    }
</style>